<template>
  <div class="sales-overview">
    <el-skeleton :rows="10" animated v-if="loading" />
    
    <template v-else>
      <!-- 销售概览表格 -->
      <el-card class="table-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>销售概览数据</span>
          </div>
        </template>
        
        <el-table :data="salesOverviewData" style="width: 100%" border stripe>
          <el-table-column prop="name" label="指标名称" width="180" />
          <el-table-column prop="value" label="当前值" width="180">
            <template #default="scope">
              <span :class="{ 'value-growth': scope.row.isGrowth }">{{ scope.row.value }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="lastPeriod" label="上期值" width="180" />
          <el-table-column prop="growth" label="环比增长" width="180">
            <template #default="scope">
              <el-tag v-if="scope.row.growth" size="small" :type="scope.row.growth >= 0 ? 'success' : 'danger'">
                {{ scope.row.growth >= 0 ? '+' : '' }}{{ scope.row.growth }}%
              </el-tag>
              <span v-else>-</span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      
      <!-- 分类销售数据表格 -->
      <el-card class="table-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>商品分类销售情况</span>
          </div>
        </template>
        
        <el-table :data="categorySalesData" style="width: 100%" border stripe>
          <el-table-column prop="name" label="分类名称" width="180" />
          <el-table-column prop="amount" label="销售金额" width="180">
            <template #default="scope">
              ¥{{ formatNumber(scope.row.amount) }}
            </template>
          </el-table-column>
          <el-table-column prop="count" label="销售数量" width="180" />
          <el-table-column prop="ratio" label="占比" width="180">
            <template #default="scope">
              {{ calculateRatio(scope.row.amount) }}%
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      
      <!-- 热销商品列表 -->
      <el-card class="table-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>热销商品 TOP 10</span>
          </div>
        </template>
        <el-table :data="topProducts" style="width: 100%" border stripe>
          <el-table-column prop="rank" label="排名" width="80" />
          <el-table-column prop="name" label="商品名称" min-width="180" />
          <el-table-column prop="category" label="分类" width="120" />
          <el-table-column prop="quantity" label="销售数量" width="120" sortable />
          <el-table-column prop="amount" label="销售金额" width="120" sortable>
            <template #default="scope">
              ¥{{ formatNumber(scope.row.amount) }}
            </template>
          </el-table-column>
          <el-table-column prop="ratio" label="销售占比" width="120">
            <template #default="scope">
              {{ scope.row.ratio }}%
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </template>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'

const props = defineProps({
  dateRange: {
    type: Array,
    required: true
  },
  loading: {
    type: Boolean,
    default: false
  },
  reportData: {
    type: Object,
    default: () => ({})
  }
})

// 计算属性 - 从报表数据中提取需要的数据
const totalSales = computed(() => props.reportData.totalSales || 0)
const totalOrders = computed(() => props.reportData.totalOrders || 0)
const avgOrderValue = computed(() => props.reportData.avgOrderValue || 0)
const totalItems = computed(() => props.reportData.totalItems || 0)
const avgItemPrice = computed(() => props.reportData.avgItemPrice || 0)
const salesGrowth = computed(() => props.reportData.salesGrowth || 0)
const orderGrowth = computed(() => props.reportData.orderGrowth || 0)
const avgOrderGrowth = computed(() => props.reportData.avgOrderGrowth || 0)
const lastPeriodSales = computed(() => props.reportData.lastPeriodSales || 0)
const lastPeriodOrders = computed(() => props.reportData.lastPeriodOrders || 0)
const lastPeriodAvgOrder = computed(() => props.reportData.lastPeriodAvgOrder || 0)
const topProducts = computed(() => props.reportData.topProducts || [])

// 格式化数字函数
const formatNumber = (num) => {
  if (num === undefined || num === null) return '0'
  
  // 如果是整数，直接返回
  if (Number.isInteger(num)) return num.toString()
  
  // 否则保留两位小数
  return num.toFixed(2)
}

// 计算销售概览数据表格
const salesOverviewData = computed(() => {
  return [
    { 
      name: '总销售额', 
      value: `¥${formatNumber(totalSales.value)}`, 
      lastPeriod: `¥${formatNumber(lastPeriodSales.value)}`,
      growth: salesGrowth.value,
      isGrowth: false
    },
    { 
      name: '订单数', 
      value: formatNumber(totalOrders.value), 
      lastPeriod: formatNumber(lastPeriodOrders.value),
      growth: orderGrowth.value,
      isGrowth: false
    },
    { 
      name: '客单价', 
      value: `¥${formatNumber(avgOrderValue.value)}`, 
      lastPeriod: `¥${formatNumber(lastPeriodAvgOrder.value)}`,
      growth: avgOrderGrowth.value,
      isGrowth: false
    },
    { 
      name: '商品数量', 
      value: formatNumber(totalItems.value), 
      lastPeriod: '-',
      growth: null,
      isGrowth: false
    },
    { 
      name: '平均商品单价', 
      value: `¥${formatNumber(avgItemPrice.value)}`, 
      lastPeriod: '-',
      growth: null,
      isGrowth: false
    }
  ]
})

// 分类销售数据
const categorySalesData = computed(() => {
  return props.reportData.categorySales || []
})

// 计算分类销售占比
const calculateRatio = (amount) => {
  if (!amount || !totalSales.value) return '0.00'
  return ((amount / totalSales.value) * 100).toFixed(2)
}

// 监听数据变化
watch(() => props.reportData, (newData) => {
  console.log('SimpleSalesOverview接收到reportData:', newData)
}, { deep: true })

onMounted(() => {
  console.log('SimpleSalesOverview组件已挂载')
})
</script>

<style scoped>
.sales-overview {
  width: 100%;
}

.table-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.value-growth {
  color: #67c23a;
  font-weight: bold;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .el-table {
    width: 100%;
    overflow-x: auto;
  }
}
</style> 